<template>
<el-dialog
  :title="title"
  :visible="visible"
   width="430px" append-to-body
  @close="close" :close-on-click-modal="false">
  <el-form :model="form" :rules="rules" ref="form" :inline="false" label-width="110px">
    <el-form-item label="会议名称" prop="meetingName">
      <el-input v-model="form.meetingName" placeholder="请输入会议名称" ></el-input>
    </el-form-item>
    <el-form-item label="会议密码" prop="password">
      <el-input v-model="form.password" placeholder="请输入会议密码" show-password></el-input>
    </el-form-item>
    <el-form-item label="会议开始时间" prop="startTime">
        <el-date-picker
        style="width:280px"
        v-model="form.startTime"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择日期时间">
        </el-date-picker>
    </el-form-item>
    <el-form-item label="会议结束时间" prop="endTime">
        <el-date-picker
        style="width:280px"
        v-model="form.endTime"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择日期时间">
        </el-date-picker>
    </el-form-item>
    <el-form-item label="参会人员"  prop="meetingJoiners">
        <el-select
            style="width:280px"
            v-model="form.meetingJoiners"
            multiple
            collapse-tags
            filterable 
            placeholder="请选择参会人员">
            <el-option
            v-for="item in userList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="submit" :loading="loading">确 定</el-button>
  </span>
</el-dialog>
</template>
<script>

export default {
  props: {

  },
  data() {
    return {
      content: '',
      visible: false,
      title: '发起会议',
      loading: false,
      isEdit: false,
      userList: [],
      form: {
        createTime: '',
        endTime: '',
        id: '',
        meetingCode: '',
        meetingJoiners: [],
        meetingName: '',
        meetingStatus: '',
        meetingUUID: '',
        password: '',
        recordPath: '',
        startTime: '',
        updateTime: '',
        userId: ''
      },
      rules: {
        meetingName: [
          { required: true, message: '请输入会议名称', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ],
        meetingJoiners: [
          { required: true, message: '请选择参会人员', trigger: 'change' }
        ]
      }
    };
  },
  computed: {

  },
  methods: {
    getUserList() {
      const params = {
        url: `/api/ems/meeting/contact/page/list`,
        type: 'post',
        params: {}
      };
      this.$ajax(params).then(resp => {
        const { result, rows } = resp;
        if (result) {
          this.userList = rows.map(v => {
            return {
              label: v.userName, value: v.userId
            };
          });
        }
      });
    },
    validForm() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      });
    },
    async submit() {
      await this.validForm(); // 表单校验
      const form = JSON.parse(JSON.stringify(this.form));
      form.meetingJoiners = form.meetingJoiners.toString();
      this.loading = true;
      const params = {
        url: `/api/ems/meeting/add`,
        type: 'post',
        params: form
      };
      this.$ajax(params).then(resp => {
        this.loading = false;
        const { result, data } = resp;
        if (result) {
          console.log(data);
          this.$message({ message: `会议创建成功`, type: 'success' });
          // this.$store.commit('gis/updateMeeting', data);
          // window.localStorage.setItem('meetingInfo', JSON.stringify(data));
          this.close();
          this.$emit('onSuccess');
        }
      });
    },
    openDialog() {
      this.isEdit = false;
      this.visible = true;
      this.getUserList();
    },
    openDialogByEdit(row) {
      console.log('row', row);
      this.isEdit = true;
      this.visible = true;
      for (const key in row) {
        this.form[key] = row[key];
      }
      this.form.content = row.contentstring;
    },
    close() {
      this.visible = false;
      for (const key in this.form) {
        this.form[key] = '';
      }
      this.form.noticestatus = 1;
      this.$refs.form.resetFields();
    }
  },
  created() {

  }
};
</script>

<style>

</style>